<template>
  <view class="mt-message-bell" :style="{ 'padding-right': commonStore.noticeNums > 0 ? '20rpx' : 0 }" @click="goNotice">
    <image
      v-if="color === 'black'"
      class="w-48rpx h-48rpx"
      src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-bell.svg"
    ></image>
    <image
      v-if="color === 'white'"
      class="w-48rpx h-48rpx"
      src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-bell-white.svg"
    ></image>
    <view class="badge-box" :style="{ 'left': commonStore.noticeNums > 0 ? '30rpx' : 0 }">
      <uv-badge bg-color="#F94B4A" max="99" :value="commonStore.noticeNums"></uv-badge>
    </view>
  </view>
</template>

<script setup>
import useCommonStore from '@/store/common';

const commonStore = useCommonStore();
const props = defineProps({
  color: {
    type: String,
    default: 'black'
  }
});

function goNotice() {
  // uni.navigateTo({
  //   url: '/pages/notice/index'
  // });
}
</script>

<style lang="scss" scoped>
.mt-message-bell {
  position: relative;
  display: inline-block;
  .badge-box {
    position: absolute;
    top: -10rpx;
  }
}
</style>
